<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/layui/layui.all.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="../js/layui/css/layui.css" />
		<script src="../js/layui/layui.js"></script>
	</head>
	<body class="layui-layout-body">
		<div class="layui-layout layui-layout-admin">
			<div class="layui-header">
				<div class="layui-logo"><img src="../img/logo.png" width="45px" height="45px"><span style="font-size: 1em;">家庭医生签约平台</span></div>
				<!-- 头部区域（可配合layui已有的水平导航） -->
				<ul class="layui-nav layui-layout-left">
					<li class="layui-nav-item">管理员端</li>
				</ul>
				<!-- 水平右侧 -->
				<ul class="layui-nav layui-layout-right">
					<li class="layui-nav-item">
						<a href="javascript:;">
							<img src="http://t.cn/RCzsdCq" class="layui-nav-img">
							<span>刘威</span>
						</a>
						<dl class="layui-nav-child">
							<dd><a href="">基本资料</a></dd>
							<dd><a href="">安全设置</a></dd>
						</dl>
					</li>
					<li class="layui-nav-item"><a href="">退出</a></li>
				</ul>
			</div>

			<div class="layui-side layui-bg-black">
				<div class="layui-side-scroll">
					<div title="菜单缩放" class="kit-side-fold" style="text-align: center;">
						<i class="layui-icon layui-icon-home"></i>
					</div>
					<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
					<ul class="layui-nav layui-nav-tree" lay-filter="test">
						<li class="layui-nav-item layui-nav-itemed">
							<a href="Doc_team_management.html" target="main"><i class="layui-icon layui-icon-user"></i> <span>医生团队管理</span></a>
						</li>
						<li class="layui-nav-item">
							<a href="serve_bag.html" target="main"><i class="layui-icon layui-icon-templeate-1"></i> <span>服务包管理</span></a>
						</li>
						<li class="layui-nav-item">
							<a href="sign_management.html" target="main"><i class="layui-icon layui-icon-file"></i> <span>签约合同管理</span></a>
						</li>
						<li class="layui-nav-item">
							<a href="family_management.html" target="main"><i class="layui-icon layui-icon-form"></i> <span>家庭档案管理</span></a>
						</li>
						<li class="layui-nav-item">
							<a href="family_member_management.html" target="main"><i class="layui-icon layui-icon-template-1"></i> <span>签约用户管理</span></a>
						</li>
						<li class="layui-nav-item">
							<a href="admin_management.html" target="main"><i class="layui-icon layui-icon-username"></i> <span>管理员</span></a>
						</li>
					</ul>
				</div>
			</div>

			<div class="layui-body">
				<!-- 内容主体区域 -->
				<iframe src="" width="100%" height="100%" style="padding: 10px;" name="main"></iframe>
				<!-- <div style="padding: 15px;" id="main" name="main">内容主体区域</div> -->
			</div>


		</div>

		<script>
			//JavaScript代码区域
			layui.use('element', function() {
				var element = layui.element;

			});

			var isShow = true; //定义一个标志位
			$('.kit-side-fold').click(function() {
				//选择出所有的span，并判断是不是hidden
				$('.layui-nav-item span').each(function() {
					if ($(this).is(':hidden')) {
						$(this).show();
					} else {
						$(this).hide();
					}
				});
				//判断isshow的状态
				if (isShow) {
					$('.layui-side.layui-bg-black').width(60); //设置宽度
					$('.kit-side-fold i').css('margin-right', '70%'); //修改图标的位置
					//将footer和body的宽度修改
					$('.layui-body').css('left', 60 + 'px');
					$('.layui-footer').css('left', 60 + 'px');
					//将二级导航栏隐藏
					$('dd span').each(function() {
						$(this).hide();
					});
					//修改标志位
					isShow = false;
				} else {
					$('.layui-side.layui-bg-black').width(200);
					$('.kit-side-fold i').css('margin-right', '10%');
					$('.layui-body').css('left', 200 + 'px');
					$('.layui-footer').css('left', 200 + 'px');
					$('dd span').each(function() {
						$(this).show();
					});
					isShow = true;
				}
			});
		</script>
	</body>
</html>
